<template>
  <div>
    我是USER
    <div class="user-list">
      <router-link :to="{path:'/user/'+item.tip+'/'+item.id,query:{info:'follow'}}" v-for="(item,index) in userList"  :key="index" padding="10px 30px">{{item.userName}}
      </router-link>

    </div>

    <div class="user-info" v-if="userInfo.userName" style="font-size:20px">
      <p>姓名: {{userInfo.userName}}</p>
      <p>性别: {{userInfo.sex}}</p>
      <p>爱好: {{userInfo.hobby}}</p>

    </div>
    <hr>
    <div v-if="userInfo.userName" class="info-list" style="font-size: 20px;">
      <router-link exact :to="{path:'',query:{info:'follow',userName:userInfo.userName}}"> 我的关注 </router-link>
      <router-link exact to="?info=share"> 我的分享 </router-link>
      <div>
        {{$route.query}}
      </div>
    </div>

  </div>
</template>

<script>

  let data = [
    {
      id: 1,
      tip:'vip',
      userName: 'leo1',
      sex: '男',
      hobby: '写代码1'

    },
    {
      id: 2,
      tip:'vip',
      userName: 'leo2',
      sex: '男',
      hobby: '写代码2'

    },
    {
      id: 3,
      tip:'vip',
      userName: 'leo3',
      sex: '男',
      hobby: '写代码3'

    },
    {
      id: 4,
      tip:'common',
      userName: 'leo4',
      sex: '男',
      hobby: '写代码4'

    }
  ];
  export default {
    data() {
      return {
        userList: data,
        userInfo:{

        }
      }
    },
    watch:{
      // 地址一旦发生变化,$route 会重新生成一个路由信息对象,监控了这个属性,会执行这个函数
      $route(){
        console.log("监控$route 在路由变化时监控路由信息")
        console.log(this.$route.params.userId)
        let id=this.$route.params.userId;
        this.getData(id);
      }
    },
    created() {
      // 渲染这个组件会调用一次这个生命周期函数
      // 复用这个组件,这个函数不会再次被调用
      // 地址一旦发生变化,$route 会重新生成一个路由信息对象
      let id=this.$route.params.userId; // 在路由创建时 获取路由信息
      this.getData(id);


    },
    methods:{
      getData(id){
        if(id){
          this.userInfo = this.userList.filter(item=> item.id==id)[0]
          console.log("2222"+this.userInfo)
        }else{
          this.userInfo ={}
        }
      }
    }
  }
</script>

<style scoped>

</style>
